<template>
    <div class="editor-style">
        <editor-title title="生成风格" required />

        <div class="flex-1 overflow-hidden">
            <div class="flex flex-wrap mx-[-6px] gap-y-2">
                <div
                    v-for="item in styleList"
                    :key="item.id"
                    class="w-[25%] px-[6px]"
                >
                    <div class="h-full cursor-pointer" @click="selectStyle(item.id)">
                        <div class="pt-[100%] relative h-0 rounded-[12px] overflow-hidden">
                            <div class="absolute inset-0 left-0 top-0">
                                <el-image
                                    :src="item.image"
                                    class="h-full w-full"
                                />
                            </div>
                            <div
                                v-if="styleIds.includes(item.id) || styleIds.includes(String(item.id))"
                                class="absolute bg-[var(--el-overlay-color-lighter)] inset-0
                                   left-0 top-0 flex items-center justify-center text-white"
                            >
                                <icon name="el-icon-SuccessFilled" :size="20" />
                            </div>
                        </div>
                        <div class="text-center text-xs mt-1">
                            {{ item.name }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useVModels } from '@vueuse/core'
import editorTitle from './editor-title.vue'

const emits = defineEmits<{
    (event: 'update:modelValue', value: string): void
}>()

const props = withDefaults(
    defineProps<{
        modelValue?: any;
        styleList?: MusicStylesResponse[];
    }>(),
    {
        modelValue: () => [],
        styleList: () => [] as MusicStylesResponse[]
    }
)

const { modelValue: styleIds } = useVModels(props, emits)

const selectStyle = (id: number) => {
    const index = styleIds.value.findIndex((item: any) => item === id)
    if (index !== -1) {
        styleIds.value.splice(index, 1)
    } else {
        styleIds.value.push(id)
    }
}
</script>
